﻿<template>
    <el-container>
        <el-header>
            <div class="left-panel">
				<sc-export 
                    :queryType="`warehouse-stock-flow/export`" 
                    :queryList="queryList" 
                    :fileName="'出入库明细'"
                    :isTest="true" 
                    showText="导出"/>
			</div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon class="vab-dropdown" :class="{ 'vab-dropdown-active': fold }" icon="arrow-up-s-line" />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-form-item label="出库仓库" label-width="100px">
                        <sc-warehouse-select
                            ref="orgselect"
                            :props="warehouseProps"
                            :selectKeyValue="'warehouseId'"
                            v-model="queryList.warehouses"
                            @fatherMethod="warehouseSelectProcess"
                        ></sc-warehouse-select>
                    </el-form-item>
                    <el-form-item label="物料分类" label-width="100px">
                        <el-tree-select
                            placeholder="---请选择物料分类---"
                            collapse-tags
                            collapse-tags-tooltip
                            v-model="queryList.materialTypeIds"
                            :props="{ label: 'label', value:'value',children: 'children' }"
                            :data="materialTypeTree"
                            multiple
                            :render-after-expand="false"
                            show-checkbox
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="物料编码" label-width="100px">
                        <el-input placeholder="---请输入物料编码---" v-model="queryList.materialCode" style="width: 300px" />
                    </el-form-item>
                    <el-form-item label="物料名称" label-width="100px">
                        <el-input placeholder="---请输入物料名称---" v-model="queryList.materialName" style="width: 300px" />
                    </el-form-item>
                    <el-form-item label="出入库时间" label-width="100px">
                        <el-date-picker style="width: 300px" v-model="queryList.stockOperDates" type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" range-separator="-"
                            unlink-panels="true" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="defaultTime"/>
                    </el-form-item>
                    <el-form-item label="业务时间" label-width="100px">
                        <el-date-picker style="width: 300px" v-model="queryList.applyOperDates" type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" range-separator="-"
                            unlink-panels="true" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="defaultTime"/>
                    </el-form-item>
                    <el-form-item label="出入库编号" label-width="100px">
                        <el-input placeholder="---请输入出入库编号---" v-model="queryList.stockOperOrderCode" style="width: 300px" />
                    </el-form-item>
                    <el-form-item label="出入库类型" label-width="100px">
                        <el-select placeholder="---请选择出入库类型---" v-model="queryList.stockOperType" style="width: 300px">
                            <el-option label="---请选择---" value />
                            <el-option v-for="item in optionsStockOperType" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="入库类型" label-width="100px" >
                        <el-select placeholder="---请选择入库类型---" v-model="queryList.inStockOperSubTypes" style="width: 300px" multiple collapse-tags :disabled="!(queryList.stockOperType!=null && queryList.stockOperType==0)">
                            <el-option label="---请选择---" value />
                            <el-option v-for="item in optionsInStockType" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出库类型" label-width="100px">
                        <el-select placeholder="---请选择状态---" v-model="queryList.outStockOperSubTypes" style="width: 300px" multiple collapse-tags :disabled="!(queryList.stockOperType!=null && queryList.stockOperType==1)">
                            <el-option label="---请选择---" value />
                            <el-option v-for="item in optionsOutStockType" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建类型" label-width="100px">
						<el-select placeholder="---请选择创建类型---" v-model="queryList.createType" style="width: 300px">
							<el-option label="---请选择---" value />
							<el-option v-for="item in optionsCreateType" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>

        <el-main class="nopadding">
            <scTable ref="mytable" :queryType="'warehouse-stock-flow/pages'" :data="listData" :queryList="queryList"
                :column="columnList" :orderList="OrderList" :sort-orders="['ascending', 'descending']"
                @selection-change="selectionChange" row-key="warehouseStockId" key="warehouseStockId" stripe show-summary remoteSummary>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column prop="applyDate" label="业务时间" width="160" sortable>
                            <template #default="scope">{{ scope.row.applyDate?.slice(0, 10) }}</template>
                        </el-table-column>
                <el-table-column prop="stockOperDate" label="出入库时间" width="180" sortable>
                    <template #default="scope">{{ scope.row.stockOperDate }}</template> 
                </el-table-column>
                <el-table-column prop="stockOperOrderCode" label="出入库编号" width="220" sortable>
                    <template #default="scope"> <span class="el-span-text" @click="goTo(scope.row, scope.$index)">{{scope.row.stockOperOrderCode}}</span></template>
                </el-table-column>
                <el-table-column prop="createType" label="创建类型" width="160" sortable>
                    <template #default="scope"> {{scope.row.createTypeDesc}}</template>
                </el-table-column>
                <el-table-column prop="materialCode" label="物料编码" width="160" sortable></el-table-column>
                <el-table-column prop="materialName" label="物料名称" width="220" sortable></el-table-column>
                <el-table-column prop="materialTypeName" label="物料分类" width="150" sortable></el-table-column>
                <el-table-column prop="materialSpecs" label="规格" width="150" sortable></el-table-column>
                <el-table-column prop="unitName" label="单位" width="150" sortable></el-table-column>
                <el-table-column prop="stockOperTypeDesc" label="出入库类型" width="140" sortable>
                    <template #default="scope">{{ scope.row.stockOperTypeDesc+"("+scope.row.stockOperSubTypeDesc+")"}}</template>
                </el-table-column>
                <el-table-column prop="warehouseName" label="仓库名称" width="150" sortable></el-table-column>
                <el-table-column prop="stockQty" label="数量" width="220" sortable></el-table-column>
                <el-table-column prop="price" label="单价" width="140" sortable></el-table-column>
                <el-table-column prop="amount" label="金额" width="150" sortable></el-table-column>
                <el-table-column prop="currentStockQty" label="库存数量" width="140" sortable></el-table-column>
                <el-table-column prop="currentPrice" label="单价" width="140" sortable></el-table-column>
                <el-table-column prop="currentAmount" label="库存金额" width="140" sortable></el-table-column>
            </scTable>
        </el-main>
    </el-container>
</template>

<script>
import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
import config from "@/config";
export default {
    name: "stockFlow",
    components: {
        publicjs,
    },
    data() {
        return {
            dialogDetail: false,
            dialogSave: false,
            receiveSave: false,
            showCondition: false,
            selectionRows: [],
            pkList: ["outStockId"],
            columnList: [],
            OrderList: { outStockId: "Asc" },
            queryList: {},
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            warehouseProps: {
                label: "warehouseName",
                value: "warehouseId",
            },
            addState: true, //可以增加
            editState: true, //可以修改
            editBatchState: true, //可以批量修改
            deleteState: true, //可以删除
            optionsStockOperType: [],
            optionsInStockType: [],
            optionsOutStockType: [],
            materialTypeTree: [],
            optionsCreateType:[],
            orgType: 0,
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
        };
    },
    methods: {
        //添加
        opAdd() {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.setData(0);
                this.$refs.saveDialog.open("Add");
            });
        },
        //编辑
        opEdit(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.setData(row.outStockId);
                this.$refs.saveDialog.open("Edit");
            });
        },
        //复制
        opCopy(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.setData(row.outStockId);
                this.$refs.saveDialog.open("Add");
            });
        },
        goTo(row){
            console.log(11111) 
            console.log(row.stockOperOrderCode) 
            if(row.stockOperType==0){
                this.$router.push({ path: '/inStock', query: { inStockCode: row.stockOperOrderCode} }); 
            }else{
                this.$router.push({ path: '/outStock', query: { outStockCode: row.stockOperOrderCode} });
            }
		},
        //审核
        audit(row) {
            this.dialogDetail = true;
            this.$nextTick(() => { 
                this.$refs.detailDialog.setData(row.outStockId);
                this.$refs.detailDialog.open("audit");
            });
        },
        //设置状态
        async setStatus(row, status) {
            let url = "out-stock/submitted";
            switch (status) {
                case 1:
                    url = "out-stock/returned";
                case 2:
                    url = "out-stock/withdrawn";
                    break;
                case 4:
                    url = "out-stock/submitted";
                    break;
            }
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    url,
                    { outStockIds: [row.outStockId] }
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$refs.mytable.getData();
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection;
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        resetSearch() {
            this.queryList = {};
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["StockOperType","OutStockType","InStockType","CreateType"] }
                );
                if (returnValue.status == 200) {
                    this.optionsStockOperType = returnValue.response.find(
                        (p) => p.code == "StockOperType"
                    ).optionsDetails;
                    this.optionsInStockType = returnValue.response.find(
                        (p) => p.code == "InStockType"
                    ).optionsDetails;
                    this.optionsOutStockType = returnValue.response.find(
                        (p) => p.code == "OutStockType"
                    ).optionsDetails;
                    this.optionsCreateType= returnValue.response.find(
						(p) => p.code == "CreateType"
					).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "material-type/tree",
                    { status: 1 }
                );
                if (returnValue.status == 200) {
                    this.materialTypeTree = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //仓库
        async warehouseSelectProcess(rowData) {
            this.queryList.warehouses = [];
            this.queryList.warehouseIds = [];
            if (rowData && rowData.length > 0) {
                rowData.map((p, index) => {
                    if (p) {
                        debugger;
                        this.queryList.warehouses = [
                            ...this.queryList.warehouses,
                            {
                                warehouseId: p.warehouseId,
                                warehouseName: p.warehouseName,
                            },
                        ];
                        this.queryList.warehouseIds = [
                            ...this.queryList.warehouseIds,
                            p.warehouseId,
                        ];
                    }
                });
            }
            await this.opBindData();
        },
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
        var materialCode=this.$route.query.materialCode;
        var beginTime=this.$route.query.beginTime;
        var endTime=this.$route.query.endTime;
        if(materialCode)
        {
            this.queryList.materialCode=materialCode;
        }
        if(beginTime && endTime)
        {
            this.queryList.stockOperDates=[beginTime,endTime];
        }
        
        await this.initOptions();
        await this.opBindData();
    },
};
</script>
